@use "sass:math";

@import '../../../stylesheets/colors';
@import '../../../stylesheets/variables';

$bar-width: 1.6vw;
$min-bar-width: 20px;
$bar-grow-duration: 0.4s;

.bar-graph-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 48vh;
}

.bar-graph {
  height: 40vh;
  padding-bottom: 6vh;
  display: flex;
  margin: 0;
  justify-content: center;
}

.bar-graph__bar-group {
  position: relative;
  height: 100%;
  margin: 0 3px;
  display: flex;
  width: $bar-width;
  min-width: $min-bar-width;
  justify-content: flex-end;
  flex-direction: column;
  animation: grow $bar-grow-duration cubic-bezier(0.305, 0.42, 0.205, 1.2);
  transform-origin: 100% 100%;
}

.bar-graph__bar-symbols {
  display: flex;
  flex-direction: column;
  margin-top: -500%; // don't know why this works :/
}

.bar-graph__bar-symbol {
  text-align: center;

  svg {
    height: $global-spacing * 1.8;
    width: auto;
  }

  & + & {
    margin-top: math.div($global-spacing, 3);
  }
}

.bar-graph__bar,
.bar-graph__bar2,
.bar-graph__bar[data-balloon],
.bar-graph__bar2[data-balloon] {
  width: 100%;
  left: 0;
  bottom: 0;
  transition: background 0.2s;
  cursor: pointer;
}

.bar-graph__bar,
.bar-graph__bar[data-balloon] {
  background: $maya-blue;
  border-radius: 5px 5px 0 0;

  .bar-graph__bar-group:not(.bar-graph__bar-group--disabled):hover & {
    background: darken($maya-blue, 5%);
  }

  .bar-graph__bar-group--disabled & {
    background: lighten($raven, 45%);
    border-radius: 5px;

    &:hover {
      background: lighten($raven, 35%);
    }
  }
}

.bar-graph__bar2 {
  background: $cornflower-blue;
  z-index: 1;
  pointer-events: none;
  border-radius: 0 0 5px 5px;

  .bar-graph__bar-group:hover & {
    background: darken($cornflower-blue, 5%);
  }
}

.bar-graph__bar-version,
.bar-graph__bar-symbols,
.bar-graph__legend {
  animation: fade-in 0.5s $bar-grow-duration * 0.9 both
    cubic-bezier(0.305, 0.42, 0.205, 1.2);
}

.bar-graph__legend {
  @include font-size-xs;
  padding-top: $global-spacing;
  display: flex;
  text-transform: uppercase;
  justify-content: center;
  color: lighten($raven, 20%);
}

.bar-graph__legend__colorbox {
  width: $global-spacing * 1.5;
  height: $global-spacing * 1.5;
  margin-right: $global-spacing;
  border-radius: 3px;

  .bar-graph__legend__bar1 & {
    background: $maya-blue;
  }

  .bar-graph__legend__bar2 & {
    background: $cornflower-blue;
  }
}

.bar-graph__legend__bar1,
.bar-graph__legend__bar2 {
  display: flex;
  align-items: center;
}

.bar-graph__legend__bar1 {
  margin-right: $global-spacing * 4;
}

@keyframes grow {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}
